<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.loddingFull{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ccc;
  /* display: none; */
}
.LoddingBox{
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin:auto;
  width: 100px;
  height: 100px;
  /* background-image: url('../images/lodding.png');
  background-repeat: no-repeat;
  background-size: 100%; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.LoddingBox .circle{
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #fff;
  bottom:28px;
  animation: load-effect 2s infinite linear;
}
.LoddingText{
  position: absolute;
  bottom: 8px;
  color:#fff;
  font-size: 13px;
}
@keyframes load-effect {
  0% {
  box-shadow: -11px 0 0px 3px #fff,11px 0 0 0 #fff;
  }
  20% {
    box-shadow: -11px 0 0px 0px #fff,11px 0 0 0 #fff,0 0 0 0 #fff;
  }
  40% {
    box-shadow: -11px 0 0px 0px #fff,11px 0 0 0px #fff,0 0 0 3px #fff;
  }
  58% {
    box-shadow: -11px 0 0px 0px #fff,11px 0 0 0px #fff,0 0 0 0 #fff;
  }
  80% {
    box-shadow: -11px 0 0px 0px #fff,11px 0 0 3px #fff,0 0 0 0 #fff;
  }
  100%{
    box-shadow: -11px 0 0px 0px #fff,11px 0 0 0px #fff,0 0 0 0 #fff;
  }
}
	</style>
</head>
<body>
	<div class="loddingFull">
		<div class="LoddingBox">
			<div class="circle" ></div>
			<div class="LoddingText">加载中</div>
		</div>
    <button onclick="alert(123)">点击</button>
	</div>

<script>

</script>
</body>
</html>